<!--我的订单-->
<style scoped>
.contain {
  height: 100%;
  overflow: auto;
}

</style>
<template>
  <div class="contain">
    <div v-if="data.length > 0" v-for="item in data">
      <form-preview v-if="item.orderState == 1" :header-label="('付款金额')" :header-value="item.amount" :body-items="item.list" :footer-buttons="buttons1">
      </form-preview>
      <flexbox v-if="item.orderState == 1">
        <flexbox-item>
          <div class="flex-demo">
            <x-button type="default" @click.native="cancel(item.orderId)">取消</x-button>
          </div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-demo">
            <x-button type="primary" @click.native="pay(item.orderId)">付款</x-button>
          </div>
        </flexbox-item>
      </flexbox>
      <form-preview v-if="item.orderState == 2" :header-label="('付款金额')" :header-value="item.amount" :body-items="item.list" :footer-buttons="buttons2"></form-preview>
      <flexbox v-if="item.orderState == 2">
        <flexbox-item>
          <div class="flex-demo">
            <x-button type="default" @click.native="refund(item.orderId)">退款</x-button>
          </div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-demo">
            <x-button type="primary" @click.native="again(item.goodsId, item.addressId, item.goodsCount)">再来一单</x-button>
          </div>
        </flexbox-item>
      </flexbox>
      <form-preview v-if="item.orderState == 3" :header-label="('付款金额')" :header-value="item.amount" :body-items="item.list" :footer-buttons="buttons2"></form-preview>
      <flexbox v-if="item.orderState == 3">
        <flexbox-item>
          <div class="flex-demo">
            <x-button type="default" @click.native="deleteOrder(item.orderId)">删除</x-button>
          </div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-demo">
            <x-button type="primary" @click.native="buyNew()">重新下单</x-button>
          </div>
        </flexbox-item>
      </flexbox>
      <br>
    </div>
    <div v-if="data.length == 0">
      <x-button type="primary" @click.native="buyNew()">去下单</x-button>
    </div>
  </div>
</template>
<script>
import { FormPreview, XButton, Flexbox, FlexboxItem, Divider } from 'vux'

export default {
  components: {
    FormPreview,
    XButton,
    Flexbox,
    FlexboxItem,
    Divider
  },
  data() {
    return {
      userId: window.localStorage["userId"],
      data: []
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/order/myOrder.json",
        params: {
          userId: this.userId
        },
        successFc: (response) => {
          this.data = response.data.data

        }
      });
    },
    cancel(orderId) {
      alert(orderId)
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/order/cancel.json",
        params: {
          userId: this.userId,
          orderId: orderId
        },
        successFc: (response) => {
          this.$store.commit('updateToast', '取消成功')
          setTimeout(() => {
            this.load()
          }, 1000)
        }
      });
    },
    buyNew() {
      this.$router.push({
        path: '/tourl/charcoalList'
      })
    },
    again(goodsId, addressId, goodsCount) {
      this.$router.push({
        path: '/tourl/comfireOrder',
        query: {
          goodsId: goodsId,
          addressId: addressId,
          goodsCount: goodsCount
        }
      })
    }
  }
}

</script>
